<template>
  <main class="home">
    <div class="function-test section">
      <div class="title">接口测试</div>
      <div class="button item" v-for="item in testApiFunctions" 
        @click="onClickFunctionTest(item)">{{ item.desc }}</div>
    </div>
    <div class="function-test section">
      <div class="title">其他杂项测试</div>
      <div class="button item" v-for="item in testFunctions" 
        @click="onClickFunctionTest(item)">{{ item.desc }}</div>
    </div>
    <div class="init-data section">
      <div class="title">初始化数据</div>
      <span>{{ appStore.initData }}</span> 
    </div>
  </main>
</template>

<script setup>
import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app';

const router = useRouter();
const appStore = useAppStore();

const testFunctions = {
  'about': {
    desc: '本地跳转',
    func: () => {
      router.push('/about');
    }
  },
  'openbot': {
    desc: '打开BOT',
    func: () => {
      window.open('https://t.me/DoubaowwBot');
    }
  },
};

const testApiFunctions = {
  'openLink': {
    desc: '跳转外部URL',
    func: (value) => {
      window.Telegram.WebApp.openLink(value ? value : 'https://baidu.com')
    }
  },
  'openTelegramLink': {
    desc: '从内部跳转',
    func: (value) => {
      window.Telegram.WebApp.openTelegramLink(value ? value : 'https://t.me/DurgerKingBot')
    }
  },
  'showAlert': {
    desc: '弹窗测试',
    func: (value) => {
      window.Telegram.WebApp.showAlert(value ? value : 'hello DouBao')
    }
  }
}

const onClickFunctionTest = item => item?.func();
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100vh;
  padding: 10px;

  .title {
    width: 100%;
    font-size: 28px;
    text-align: center;
    padding-bottom: 5px;
  }

  .section {
    margin-bottom: 15px;
  }

  .function-test {
    display: flex;
    flex-wrap: wrap;

    .item { display: block; }
    .item+.item {
      margin-left: 10px;
    }
  }

  .init-data {
    width: 100%;
    word-wrap: break-word;
  }
}
</style>